React 回憶錄 PartII

本來今天應該要開始準備Redux的建置

不過後來想想

還是先解決CSS的問題

建立Redux的基本資料夾

雖然這次還沒要開始加入Redux

基本上一些資料夾已經可以事先建立

建立完成後如下

src/

.
├── App.css
├── App.js
├── App.test.js
├── actions
├── components
├── containers
├── index.css
├── index.js
├── logo.svg
├── reducers
├── routes
├── store
└── utils

整理程式碼

在Containers 中建立一個資料夾 HomeScene

在containers/HomeScene/index.js 增加如下

import React, {Component} from 'react';
import logo from './logo.svg';
import './styles.css';

    export default class HomeScene extends Component {

      render() {
        return (
          <div className="App">
            <div className="App-header">
              <img src={logo} className="App-logo" alt="logo"/>
              <h2>Welcome to React</h2>
            </div>
            <p className="App-intro">
              To get started, edit
              <code>src/App.js</code>
              and save to reload.
            </p>
          </div>
        );
      }

將 App.js 修改為

import React, {Component} from 'react';
import HomeScene from './containers/HomeScene';

class App extends Component {
  render() {
    return (<HomeScene/>);
  }
}

export default App;

將App.css 移動到 containers/HomeScene 並重新命名為 styles.css

再把logo.svg 移動到 containers/HomeScene

Why??

每個Container我皆視為一整個頁面

所以在命名為HomeScene

而將所有使用到的CSS皆放置在同樣的一個頁面

在各自的Module引用

在編譯後

會將CSS整理到Header 中的 Style Tag中

但是如果在Components中增加一個Module

也 import "styles.css"的時候

header 會另外增加一個style的tag

我增加了一個 components/text.js

import React, {Component} from 'react';
import './styles.css';

export default class Text extends Component {
  render() {
    return (
      <div>
        <p>test</p>
      </div>
    );
  }
}

containers/HomeScene/index.js

import React, {Component} from 'react';
import logo from './logo.svg';
import './styles.css';

import Text from '../../components/test';

export default class HomeScene extends Component {

  render() {
    return (
      <div className="App">
        <Text/>
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo"/>
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit
          <code>src/App.js</code>
          and save to reload.
        </p>
      </div>
    );
  }
}

如下圖

它會在header增加一個 style tags

並且在components中的styles.css

因為也包含了一個.App的class

他會將原本的.APP覆蓋過去

導致Background Color被修改為綠色

這也是在使用這需要注意的地方

明天會開始談Redux的Actions與Store

謝謝